<!DOCTYPE html>
<html lang="en">

<head>
    <#include "/jh/admin/components/meta.html" />
    <title>选课学生 ${metaTitleSuffix!}</title>
    <#include "/jh/admin/components/stylesheets.html" />
</head>

<body>
    <div id="app">
        <el-container>
            <#assign menuIndex="1-2" />
            <#include "/jh/admin/components/menu.html" />
            <el-container>
                <#include "/jh/admin/components/header.html" />
                <el-main>
                    <template>
                        <el-row>
                            <el-col :span="24">
                                <div class="title theme-color1">添加学生</div>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="4">
                                <div class="info">课程名称：{{ info.courseName }}</div>
                            </el-col>
                            <el-col :span="4">
                                <div class="info">主题：{{ info.topic }}</div>
                            </el-col>
                            <el-col :span="4">
                                <div class="info">等级：{{ info.tags }}</div>
                            </el-col>
                            <el-col :span="4">
                                <div class="info">日期：{{ info.date }}</div>
                            </el-col>
                            <el-col :span="4">
                                <div class="info">时间：{{ info.startTime }}~{{ info.endTime }}</div>
                            </el-col>
                            <el-col :span="4">
                                <div class="info" v-if="info.teacherName != null">老师：{{ info.teacherName }}</div>
                                <div class="info" v-else>老师：{{ info.partTimeTeacherName }}</div>
                            </el-col>
                            <el-col :span="4">
                                <div class="info">校区：{{ info.schoolName }}</div>
                            </el-col>
                        </el-row>
                        <div style="display: flex; align-items: center;">
                            <el-input v-model="keyword" placeholder="请输入搜索内容" class="search-input"></el-input>
                            <el-button type="primary" @click="search"><i class="el-icon-search"></i>&nbsp;搜索</el-button>
                        </div>
                        <div class="table-container">
                            <el-tabs v-model="selectedTab" @tab-click="onTabChange">
                                <el-tab-pane v-for="(item, index) in tabs" :label="item" :name="item"></el-tab-pane>
                            </el-tabs>
                            <el-table :data="list1" tooltip-effect="dark" style="width: 100%;" @selection-change="onSelectedStudent1Change">
                                <el-table-column type="selection" width="55">
                                </el-table-column>
                                <el-table-column prop="code" label="编号" sortable>
                                </el-table-column>
                                <el-table-column prop="name" label="姓名" sortable>
                                    <template slot-scope="scope">
                                        <span>{{scope.row.name}}</span><span v-if='scope.row.isBlackList==1' title="黑名单" style="color: red">[***]</span><span v-if='scope.row.isDemo==1' title="Demo">[Demo]</span><span v-if='scope.row.isVIP==1' title="VIP">[VIP]</span><span v-if='scope.row.isDisable==1' title="已禁用">[已禁用]</span><span v-if='scope.row.isLeave==1' title="已离校">[已离校]</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="englishName" label="英文名" sortable>
                                </el-table-column>
                                <el-table-column prop="tag" label="等级" sortable>
                                </el-table-column>
                                <el-table-column prop="mobile" label="电话" sortable>
                                </el-table-column>
                                <el-table-column prop="schoolName" label="校区" sortable>
                                </el-table-column>
                            </el-table>
                            <div class="buttons">
                                <el-button type="primary" @click="add">添加</el-button>
                                <el-button @click="">取消选择</el-button>
                            </div>
                        </div>
                        <div class="table-container">
                            <div class="added-info">
                                <span style="color: #e77115; margin-right: 2rem;">已添加</span>
                                <span v-if="info.limit == 0">{{arrangeStudentCount}} / 不限</span>
                                <span v-else>{{arrangeStudentCount}} / {{ info.limit }}</span>
                            </div>
                            <el-table :data="list2" tooltip-effect="dark" style="width: 100%;" @selection-change="onSelectedStudent2Change">
                                <el-table-column type="selection" width="55">
                                </el-table-column>
                                <el-table-column prop="code" label="编号" sortable width="80">
                                </el-table-column>
                                <el-table-column prop="name" label="姓名" sortable width="80">
                                    <template slot-scope="scope">
                                        <span>{{scope.row.name}}</span><span v-if='scope.row.isBlackList==1' title="黑名单" style="color: red">[***]</span><span v-if='scope.row.isDemo==1' title="Demo">[Demo]</span><span v-if='scope.row.isVIP==1' title="VIP">[VIP]</span><span v-if='scope.row.isDisable==1' title="已禁用">[已禁用]</span><span v-if='scope.row.isLeave==1' title="已离校">[已离校]</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="englishName" label="英文名" sortable width="100">
                                </el-table-column>
                                <el-table-column prop="tag" label="等级" sortable width="80">
                                </el-table-column>
                                <el-table-column prop="mobile" label="电话" sortable width="100">
                                </el-table-column>
                                <el-table-column prop="schoolName" label="校区" sortable width="100">
                                </el-table-column>
                                <el-table-column prop="addTime" label="选课时间" sortable width="150">
                                </el-table-column>
                                <el-table-column prop="mark" label="备注" sortable>
                                    <template slot-scope='scope'>
                                        <el-input v-model="scope.row.mark" :placeholder="scope.row.mark" clearable='true'>
                                            <el-button slot="append" size='small' icon="el-icon-check" @click='onChangeMark(scope.row)'></el-button>
                                        </el-input>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <el-pagination layout="prev, pager, next" :total="${pageTotalRow!0}" :current-page='${pageCurrent!1}' :page-size="${pageSize!50}" @current-change="onPageChange">
                            </el-pagination>
                            <div class="buttons">
                                <el-button type="danger" @click="onCancelStudent">取消选课</el-button>
                            </div>
                        </div>
                    </template>
                </el-main>
            </el-container>
        </el-container>
        <#include "/jh/admin/components/footer.html" />
    </div>
    <#include "/jh/admin/components/scripts.html" />
    <script type="text/javascript">
    var vue = new Vue({
        el: '#app',
        data() {
            return {
                info: {},
                keyword: '',
                tabs: [],
                selectedTab: 'tab0',
                list1: [],
                list2: [],
                multipleSelectionList1: [],
                multipleSelectionList2: [],
                arrangeStudentCount: 0
            }
        },
        mounted: function() {
            var infoStr = '${info!}'
            var tagStr = '${tags!}';
            if (infoStr != '') {
                this.info = JSON.parse(infoStr);
            } else {
                alert('加载失败');
            }
            if (tagStr != '') {
                this.tabs = tagStr.split(",");
                this.tabs.pop();
                this.tabs.push("全部");
                if (this.tabs.length > 0) {
                    this.selectedTab = this.tabs[this.tabs.length - 1];
                }
            }

            var str = '${items!}'
            if (str != '') {
                //this.list = ${items!};
                this.list2 = JSON.parse('${items!}')
                this.arrangeStudentCount = this.list2.length
            }
        },
        methods: {
            onChangeMark(val) {
                MtaH5.clickStat("add_arrange_mark")
                var studentId = val.id;
                var arrangeId = val.arrangeId
                var mark = val.mark
                console.log(mark)
                console.log(studentId + ' - ' + arrangeId)
                var param = {
                    mark: mark,
                    studentId: studentId,
                    arrangeId: arrangeId
                }
                // function axiosRequestPro(params, url, success, fail, complete) {
                // axiosR
                var redirect = '/jh/admin/arrange/addStudentToArrange?arrangeId=' + arrangeId
                axiosRequest(param, '/jh/admin/arrange/setArrangeStudentMark', redirect)
            },
            search() {
                var _self = this
                var keyword = this.keyword
                var param = Qs.stringify({
                    keyword: keyword
                });
                param['tag'] = this.selectedTab;
                if (this.selectedTab != '全部') {
                    param = Qs.stringify({
                        keyword: keyword,
                        tag: this.selectedTab
                    });
                }
                loading();
                axios({
                        url: '/jh/admin/student/search',
                        method: 'post',
                        data: param,
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        }
                    })
                    .then(function(response) {
                        endLoading();

                        if (response.data.status == 200) {
                            console.log(response.data.info)
                            // msg("登录成功");
                            _self.list1 = response.data.info
                        } else {
                            msg(response.data.msg);
                            console.log(response.data);
                        }
                    })
                    .catch(function(error) {
                        endLoading();
                        msg("删除失败");
                        console.log(error);
                    });
            },
            onCancelStudent() {
                var ids = ''
                if (this.multipleSelectionList2.length == 0) {
                    return;
                }
                this.multipleSelectionList2.forEach(row => {
                    ids = ids + row.id + ','
                });
                confirm("确认取消选课", "确认", function() {
                    var param = Qs.stringify({
                        ids: ids,
                        arrangeId: '${info.id}'
                    });
                    loading();
                    axios({
                            url: '/jh/admin/arrange/removeStudents',
                            method: 'post',
                            data: param,
                            headers: {
                                'Content-Type': 'application/x-www-form-urlencoded'
                            }
                        })
                        .then(function(response) {
                            endLoading();
                            if (response.data.status == 200) {
                                window.location.href = "/jh/admin/arrange/addStudentToArrange?arrangeId=${info.id}";
                            } else {
                                msg(response.data.msg);
                                console.log(response.data);
                            }
                        })
                        .catch(function(error) {
                            endLoading();
                            msg("请求失败");
                            console.log(error);
                        });
                })
            },
            add() {
                var ids = ''
                this.multipleSelectionList1.forEach(row => {
                    console.log(row)
                    ids = ids + row.id + ','
                });
                console.log(ids)
                var param = Qs.stringify({
                    ids: ids,
                    arrangeId: '${info.id}'
                });
                axios({
                        url: '/jh/admin/arrange/addStudents',
                        method: 'post',
                        data: param,
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        }
                    })
                    .then(function(response) {
                        endLoading();
                        if (response.data.status == 200) {
                            window.location.href = "/jh/admin/arrange/addStudentToArrange?arrangeId=${info.id}";
                        } else {
                            msg(response.data.msg);
                            console.log(response.data);
                        }
                    })
                    .catch(function(error) {
                        endLoading();
                        msg("请求失败");
                        console.log(error);
                    });
            },
            edit(item) {
                window.location.href = "/jh/admin/staff/info?staffId=" + item.id;
            },
            del(item) {
                var self = this;
                confirm("确认删除？请谨慎操作", "确认", function() {
                    var param = Qs.stringify({
                        studentId: item.id
                    });
                    axios({
                            url: '/jh/admin/staff/delete',
                            method: 'post',
                            data: param,
                            headers: {
                                'Content-Type': 'application/x-www-form-urlencoded'
                            }
                        })
                        .then(function(response) {
                            if (response.data.status == 200) {
                                endLoading();
                                window.location.href = "/jh/admin/staff/list";
                                // msg("登录成功");
                            } else {
                                endLoading();
                                msg(response.data.msg);
                                console.log(response.data);
                            }
                        })
                        .catch(function(error) {
                            endLoading();
                            msg("删除失败");
                            console.log(error);
                        });
                })
            },
            onTabChange(tab, event) {

            },
            onSelectedStudent1Change(val) {
                this.multipleSelectionList1 = val
            },
            onSelectedStudent2Change(val) {
                this.multipleSelectionList2 = val
            },
            onPageChange(val) {
                console.log('当前页: {val}' + val);
                goPage(val)
            }
        }
    })
    </script>
    <style type="text/css">
    .title {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 1rem;
    }

    .info {
        font-size: 14px;
        margin-bottom: 1rem;
    }

    .search-input {
        width: 35%;
        margin-right: 1rem;
    }

    .table-container {
        margin-top: 1rem;
        padding: 1rem;
        border: 1px solid #dcdfe6;
    }

    .buttons {
        margin-top: 1rem;
    }

    .added-info {
        font-size: 14px;
    }
    </style>
    <#include "/jh/admin/components/msg.html" />
</body>

</html>